<template>
  <div>
    <h1>this.$route.params.id is
      <mark style="color: red">{{ this.$route.params.id }}</mark>
    </h1>

    <button @click="generateUserId">generateUserId</button>

    <button @click="showUserProfile">showUserProfile</button>

    <div
        style="border-width: 1px; border-style: solid; border-color: #aaa; width: 500px; height: 200px; position: absolute;left: 50%; margin-left: -250px; margin-top: 20px ">
      用户详情：
      <router-view></router-view>
    </div>

  </div>
</template>


<script>
export default {
  name: 'UserView',
  methods: {
    // 生成一个UserId
    generateUserId() {
      let userId = Math.round(Math.random() * 10000)
      this.$router.push('/user/demo' + userId)
    },
    // 下面这个是通过嵌套路由显示
    showUserProfile() {
      let userId = this.$route.params.id
      this.$router.push('/user/' + userId + '/profile')
    }
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate-to', to)
    console.log('beforeRouteUpdate-from', from)
    next();
  },
  watch: {
    $route(to, from) {
      console.log('===> origin url: ', from)
      console.log('===> dest url: ', to)
    }
  }

}
</script>